<template>
	<div class="systemNetworkPage">
		<div class="systemNetWorkPageBox">
			<div class="pageTitle">网卡列表</div>
			<div class="pageList">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="networkName" label="网卡名称" width="180">
						<template slot-scope="scope">
							<span>{{ scope.row.networkName | networkNameFilter }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="ipaddr" label="IP地址" width="180"> </el-table-column>
					<el-table-column prop="netmask" label="子网掩码"> </el-table-column>
					<el-table-column prop="gateway" label="网关"> </el-table-column>
					<!-- <el-table-column prop="status" label="状态">
						<template slot-scope="scope">
							<span v-if="scope.row.status == 0">已启用</span>
							<span v-if="scope.row.status == 1">已禁用</span>
						</template>
					</el-table-column> -->
					<el-table-column prop="primaryDns" label="主DNS"> </el-table-column>
					<el-table-column prop="standbyDns" label="备DNS"> </el-table-column>
					<el-table-column label="操作" width="180">
						<template slot-scope="scope">
							<el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 自定义alertBox弹框——编辑 -->
			<AlertBox :alertBoxVisible="alertBoxIssueVisible">
				<div class="contentBox contentBoxDetailsSystemNetwork_class">
					<div class="contentBox_header">
						<p>编辑网卡信息</p>
						<i class="wj-icon-guanbi" @click="alertBoxFormclose"></i>
					</div>
					<div class="contentBox_body">
						<div class="infoRow_form">
							<span>网卡名称<b style="color: rgb(248, 4, 4)">*</b></span>
							<div class="form-item">
								<el-input
									v-model="networkEdit.networkName"
									placeholder="请输入网卡名称"
									v-validate="'required'"
									:disabled="true"
								></el-input>
							</div>
						</div>
						<div class="infoRow_form">
							<span>IP地址<b style="color: rgb(248, 4, 4)">*</b></span>
							<div class="form-item">
								<el-input v-model="networkEdit.ipaddr" placeholder="请输入IP地址" v-validate="'required|ipAddr'"></el-input>
							</div>
						</div>
						<div class="infoRow_form">
							<span>子网掩码<b style="color: rgb(248, 4, 4)">*</b></span>
							<div class="form-item">
								<el-input v-model="networkEdit.netmask" placeholder="请输入子网掩码" v-validate="'required|subnetMask'"></el-input>
							</div>
						</div>
						<div class="infoRow_form">
							<span>网关<b style="color: rgb(248, 4, 4)">*</b></span>
							<div class="form-item">
								<el-input v-model="networkEdit.gateway" placeholder="请输入网关" v-validate="'required|gateway'"></el-input>
							</div>
						</div>
						<!-- <div class="infoRow_form">
							<span>状态</span>
							<div class="form-item">
								<el-switch v-model="networkEdit.status" @change="handleSwitch" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
							</div>
						</div> -->
						<div class="infoRow_form">
							<span>主DNS</span>
							<div class="form-item">
								<el-input v-model="networkEdit.primaryDns" placeholder="请输入主DNS" v-validate="'ipAddrAndnull'"></el-input>
							</div>
						</div>
						<div class="infoRow_form">
							<span>备DNS</span>
							<div class="form-item">
								<el-input v-model="networkEdit.standbyDns" placeholder="请输入备DNS" v-validate="'ipAddrAndnull'"></el-input>
							</div>
						</div>
					</div>
					<div class="contentBox_footer">
						<wj-Button type="save" v-checksubmit="{ submitEvent: networkEditConfirm, cls: 'contentBoxDetailsSystemNetwork_class' }"
							>确定</wj-Button
						>
					</div>
				</div>
			</AlertBox>
		</div>
	</div>
</template>
<script>
import { system_network_all, system_network_Edit } from "@/utils/request/api";
export default {
	name: "SystemNetwork",
	data() {
		return {
			// 表格数据
			tableData: [
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
				// {
				// 	networkName: "GE0/0",
				// 	networkIP: "192.168.1.27",
				// 	subnet: "255.255.255.0",
				// 	state: "开启",
				// 	mainDNS: "114.114.114.114",
				// 	standbyDNS: "8.8.8.8",
				// },
			],
			// 自定义弹窗控制——编辑
			alertBoxIssueVisible: false,
			// 编辑
			networkEdit: {
				id: "",
				networkName: "",
				ipaddr: "",
				netmask: "",
				gateway: "",
				status: true,
				primaryDns: "",
				standbyDns: "",
			},
		};
	},
	created() {},
	mounted() {
		this.getAllNetwork();
	},
	//过滤器
	filters: {
		networkNameFilter(value) {
			var newValue = "";
			switch (value) {
				case "enp1s0":
					newValue = "GE1/0";
					break;
				case "enp2s0":
					newValue = "GE1/1";
					break;
				case "enp5s0":
					newValue = "GE1/2";
					break;
				case "enp6s0":
					newValue = "GE1/3";
					break;
				case "enp7s0":
					newValue = "GE1/4";
					break;
				case "enp8s0":
					newValue = "GE1/5";
					break;
				default:
					newValue = value;
			}
			return newValue;
		},
	},
	methods: {
		// 转换
		transformNetworkName(value) {
			var newValue = "";
			switch (value) {
				case "enp1s0":
					newValue = "GE1/0";
					break;
				case "enp2s0":
					newValue = "GE1/1";
					break;
				case "enp5s0":
					newValue = "GE1/2";
					break;
				case "enp6s0":
					newValue = "GE1/3";
					break;
				case "enp7s0":
					newValue = "GE1/4";
					break;
				case "enp8s0":
					newValue = "GE1/5";
					break;
				case "GE1/0":
					newValue = "enp1s0";
					break;
				case "GE1/1":
					newValue = "enp2s0";
					break;
				case "GE1/2":
					newValue = "enp5s0";
					break;
				case "GE1/3":
					newValue = "enp6s0";
					break;
				case "GE1/4":
					newValue = "enp7s0";
					break;
				case "GE1/5":
					newValue = "enp8s0";
					break;
				default:
					newValue = value;
			}
			return newValue;
		},
		// 编辑
		handleEdit(index, row) {
			console.log(index, row);
			this.alertBoxIssueVisible = true;
			this.networkEdit = {
				id: row.id,
				networkName: this.transformNetworkName(row.networkName),
				ipaddr: row.ipaddr,
				netmask: row.netmask,
				gateway: row.gateway,
				status: row.status == 0 ? true : false,
				primaryDns: row.primaryDns,
				standbyDns: row.standbyDns,
			};
		},
		// 开关
		handleSwitch(newValue) {
			console.log(newValue);
		},
		// alertBox——编辑 关闭
		alertBoxFormclose() {
			this.alertBoxIssueVisible = false;
		},
		// alertBox——编辑 确定
		networkEditConfirm() {
			system_network_Edit({
				id: this.networkEdit.id,
				networkName: this.transformNetworkName(this.networkEdit.networkName),
				ipaddr: this.networkEdit.ipaddr,
				netmask: this.networkEdit.netmask,
				gateway: this.networkEdit.gateway,
				status: this.networkEdit.status == true ? 0 : 1,
				primaryDns: this.networkEdit.primaryDns,
				standbyDns: this.networkEdit.standbyDns,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("网卡配置修改成功！");
					this.alertBoxIssueVisible = false;
					this.getAllNetwork();
				} else {
					this.$msg.error("网卡配置修改失败！");
				}
			});
		},
		// 获取所有网络配置
		getAllNetwork() {
			system_network_all().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableData = res.data;
				} else {
					this.$msg.error("获取网络配置失败！");
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
.systemNetworkPage {
	width: 100%;
	height: 100%;
	background: #ffffff;
	overflow: hidden;
	.systemNetWorkPageBox {
		width: 101%;
		height: 100%;
		padding: 12px 20px;
		box-sizing: border-box;
		background: #ffffff;
		overflow-y: scroll;
		.pageTitle {
			width: 100%;
			height: 48px;
			font-size: 18px;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}
		.pageList {
			width: 100%;
			/deep/ .el-table {
				border-left: 1px solid #ebeef5;
				border-right: 1px solid #ebeef5;
				border-top: 1px solid #ebeef5;
			}
			/deep/ .el-link {
				margin: 0 12px 0 0;
			}
			/deep/ .el-table th.el-table__cell {
				background: #ebeef5;
				font-size: 15px;
			}
		}
	}
}
</style>
